<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="Name" min-width="180" />
      <el-table-column label="Operations" min-width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="editRowHandler(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="controlRowHandler(scope.row)"
          >
            操作
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <controlDialog
      :visible.sync="controlVisible"
      :form="controlForm"
    ></controlDialog> -->
    <editDialog
      :visible.sync="editVisible"
      @update:visible="controlVisible = $event"
      :form="editForm"
      :editRow="editRow"
    >
    </editDialog>
  </div>
</template>

<script>
// import controlDialog from "./components/controlDialog";
import editDialog from "./components/editDialog";

export default {
  name: "codeReview02-index",
  components: {
    // controlDialog,
    editDialog
  },
  data() {
    return {
      editVisible: false,
      controlVisible: false,
      tableData: [{ name: 1 }, { name: 2 }],
      editRow: {},
      editForm: {},
      controlForm: {
        name: undefined
      }
    };
  },
  methods: {
    getList() {
      // 模拟远程获取数据
      this.tableData = [{ name: 111 }, { name: 2 }];
    },
    editRowHandler(row) {
      this.editRow = row;
      this.editVisible = true;
      // ...很多代码
      this.$set(this.editForm, "name", row.name);
    },
    controlRowHandler(row) {
      this.controlVisible = true;
      // ...很多代码
      this.controlForm.name = row.name;
    }
  }
};
</script>
